<template>
    <div>
        <a-row>
            <a-col :span="12" style="position: relative">
                <h-section collapse style="padding: 0">
                    <template #title>
                        <span>交付需求</span>
                    </template>
                    <a-form layout="inline" labelAlign="left">
                        <a-row>
                            <a-col :span="6">
                                <a-form-item label="计划/上线需求数" :span="24">
                                    <span class="font-w-b">{{ listA[0].planProductCount }}/{{ listA[0].onlineProductCount }}</span>
                                </a-form-item>
                            </a-col>
                            <a-col :span="5">
                                <a-form-item label="需求完成率" :span="24">
                                    <span class="font-w-b"> {{ $filters.valToPercentFilter(listA[0].completePercent) }}</span>
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="测试用例" :span="24">
                                    <div>
                                        <flexbox>
                                            <a-tag color="green" style="width: 80px">
                                                <flexbox justify="space-between">
                                                    <span>通过：</span>
                                                    <span> {{ listA[0].passTestCast }}</span>
                                                </flexbox>
                                            </a-tag>
                                            <DownOutlined style="color: #26a971" @click="isCollasped = !isCollasped" />
                                        </flexbox>
                                        <div v-if="isCollasped">
                                            <a-tag color="red" style="margin-top: 8px; width: 80px">
                                                <flexbox justify="space-between">
                                                    <span>未通过：</span>
                                                    <span>{{ listA[0].failTestCast }}</span>
                                                </flexbox>
                                            </a-tag>
                                            <a-tag color="orange" style="margin-top: 8px; width: 80px">
                                                <flexbox justify="space-between">
                                                    <span>不可用：</span>
                                                    <span>{{ listA[0].naTestCast }}</span>
                                                </flexbox>
                                            </a-tag>
                                            <a-tag color="pink" style="margin-top: 8px; width: 80px">
                                                <flexbox justify="space-between">
                                                    <span>阻塞：</span>
                                                    <span>{{ listA[0].blockTestCast }}</span>
                                                </flexbox>
                                            </a-tag>
                                        </div>
                                    </div>
                                </a-form-item>
                            </a-col>
                            <a-col :span="4">
                                <a-form-item label="研发中bug数" :span="24">
                                    <span class="font-w-b">{{ listA[0].randdBugCount }}</span>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </h-section>
                <div style="position: absolute; top: 0; right: 24px; width: 1px; height: calc(100% + 32px); margin: -24px 0 -8px 0; background: #efefef"></div>
            </a-col>

            <a-col :span="12">
                <h-section collapse style="padding: 0">
                    <template #title>
                        <span>交付成本</span>
                    </template>
                    <a-form layout="inline" labelAlign="left">
                        <a-row>
                            <a-col :span="6">
                                <a-form-item label="预估成本" :span="24">
                                    <span class="font-w-b"> {{ listA[0].realTotalCost }}</span>
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="预估成本方式" :span="24">
                                    <span class="font-w-b"> {{ allProCalModel }}</span>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </h-section>
            </a-col>
        </a-row>
        <div style="width: calc(100% + 32px); margin: 8px -16px; height: 1px; background: #efefef"></div>
        <!-- <slot></slot>
        <div style="width: calc(100% + 32px); margin: 8px -16px; height: 1px; background: #efefef"></div> -->

        <h-section title="计划上线需求" collapse style="padding: 0">
            <custom-table :scroll="{ x: 1300 }" ref="planRuleTableRef" :rules="planTableRules" class="margin-t-16" bordered size="small" rowKey="id" :pagination="false" :columns="columnsB" :data-source="listB">
                <template #requireType="{ record }">
                    <h-product-type :type="$filters.valToNameFilter('requireType', record.requireType)" />
                </template>
                <template #status="{ record }">
                    <flexbox>
                        <h-status-badge :status="record.status" />
                    </flexbox>
                </template>
                <template #expectTime="{ text }">
                    {{ $filters.dateFilter(text) }}
                </template>
                <template #statisticsOpinion="{ record }">
                    <div v-if="!record.onlineTime">
                        <a-textarea :autoSize="{ minRows: 2, maxRows: 8 }" v-model:value="record.statisticsOpinion" placeholder="请输入限制200字以内" :maxlength="200" v-if="detailData.stage === '2'" />
                        <a-tooltip :title="record.statisticsOpinion" v-else>
                            <div v-html="record.statisticsOpinion" v-fitText />
                        </a-tooltip>
                    </div>
                </template>
            </custom-table>
        </h-section>

        <div style="width: calc(100% + 32px); margin: 8px -16px; height: 1px; background: #efefef"></div>

        <h-section title="实际上线需求" collapse style="padding: 0">
            <custom-table :scroll="{ x: 1300 }" ref="onlineRuleTableRef" :rules="onlineTableRules" class="margin-t-16" bordered size="small" rowKey="id" :pagination="false" :columns="columnsC" :data-source="listC">
                <template #requireType="{ record }">
                    <h-product-type :type="$filters.valToNameFilter('requireType', record.requireType)" />
                </template>
                <template #status="{ record }">
                    <flexbox>
                        <h-status-badge :status="record.status" />
                    </flexbox>
                </template>
                <template #expectTime="{ text }">
                    {{ $filters.dateFilter(text) }}
                </template>
                <template #versionOnlineTime>
                    {{ $filters.dateFilter(detail.pmpRequireTrackTimeDTO?.versionOnlineRealTime) }}
                </template>
                <template #riskCount="{ text, record }">
                    <flexbox>
                        <a-tag color="orange" v-if="text > 0">{{ text }}项风险</a-tag>
                        <router-link :to="{ path: '/energyManage/riskAnalysis', query: { id: record.id } }">详情</router-link>
                    </flexbox>
                </template>
                <template #statisticsOpinion="{ record }">
                    <div v-if="onlineStatus === '2'">
                        <a-textarea v-model:value="record.statisticsOpinion" placeholder="请输入限制200字以内" :maxlength="200" :autoSize="{ minRows: 2, maxRows: 8 }" v-if="detailData.stage === '2'" />
                        <a-tooltip :title="record.statisticsOpinion" v-else>
                            <div v-html="record.statisticsOpinion" v-fitText />
                        </a-tooltip>
                    </div>
                </template>
            </custom-table>
        </h-section>
    </div>
</template>

<script lang="ts">
import { detailWaicaiData } from '@/views/energyManage/versionReportHistory/config/columns';
const { columnsB, columnsC } = detailWaicaiData;
import { DownOutlined } from '@ant-design/icons-vue';
import { HStatusBadge, CustomTable, HProductType } from '@/components';
import { deepClone } from '@/utils/util';
import { defineComponent, ref, unref, reactive, toRefs, watch, computed } from 'vue';
export default defineComponent({
    components: {
        HStatusBadge,
        CustomTable,
        DownOutlined,
        HProductType
    },
    props: {
        detail: {
            type: Object,
            default: () => ({})
        },
        onlineStatus: {
            type: String,
            default: ''
        }
    },
    setup(props) {
        const state = reactive<any>({
            detailData: {},
            listA: [],
            listB: [],
            listC: [],
            isCollasped: false
        });
        const onlineRuleTableRef = ref<any>();
        const allProCalModel = computed(() => {
            // 拼接功能点和模块
            let str = '';
            state.listC.forEach((item) => {
                const text = item.calModel === '0' ? '功能点' : '模块';
                if (str.indexOf('功能点') < 0 && str.indexOf('模块') < 0) {
                    str += str ? `.${text}` : `${text}`;
                }
            });
            return str;
        });
        const validateOnline = (rule: any, value: any, rowIndex) => {
            if (props.onlineStatus === '2') {
                return value ? Promise.resolve() : Promise.reject('及时性说明不能为空');
            } else {
                return Promise.resolve();
            }
        };
        const onlineTableRules = {
            statisticsOpinion: [{ validator: validateOnline, message: '及时性说明不能为空' }]
        };

        const planRuleTableRef = ref<any>();
        const validatePlan = (rule: any, value: any, rowIndex) => {
            if (!state.listB[rowIndex].onlineTime) {
                return value ? Promise.resolve() : Promise.reject('未完成原因不能为空');
            } else {
                return Promise.resolve();
            }
        };
        const planTableRules = {
            statisticsOpinion: [{ validator: validatePlan, message: '未完成原因不能为空' }]
        };
        const validate = async () => {
            let res = true;
            if (state.detailData.stage === '2') {
                const arr = await Promise.all([unref(planRuleTableRef).validate(), unref(onlineRuleTableRef).validate()]);
                res = arr.every((item) => item);
            }
            return res;
        };
        watch(
            () => props.detail,
            (n) => {
                state.detailData = deepClone(n);
                state.listA = [state.detailData];
                state.listB = state.detailData.planProductRequireDTOS ? [...state.detailData.planProductRequireDTOS] : [];
                state.listC = state.detailData.onlineProductRequireDTOS ? [...state.detailData.onlineProductRequireDTOS] : [];
            },
            { immediate: true }
        );
        return {
            columnsB,
            columnsC,
            onlineRuleTableRef,
            validateOnline,
            onlineTableRules,
            planRuleTableRef,
            validatePlan,
            planTableRules,
            ...toRefs(state),
            validate,
            allProCalModel
        };
    }
});
</script>
<style scoped lang="less">
::v-deep(.ant-form-item-label) {
    min-width: 0;
}
</style>